<template>
  <div class="app-container home">
    <!-- 输入框：用于输入研究项目名称，绑定到 inputSearch -->
    研究项目名称
    <el-input
      v-model="inputSearch"
      placeholder="请输入内容"
      class="inRes"
      style="margin-right: 10px"
    ></el-input>

    <!-- 查询按钮，点击时调用 searchTitle 方法 -->
    <el-button type="primary" @click="searchTitle()">查询</el-button>

    <!-- 刷新按钮，点击时调用 refresh 方法重新加载所有研究项目 -->
    <el-button type="success" @click="refresh()">刷新</el-button>

    <!-- 使用 Element UI 的网格系统，将研究项目的卡片分成3列显示 -->
    <el-row :gutter="24" style="margin-top: 16px">
      <!-- 循环遍历 researchList，动态生成每个项目的卡片 -->
      <el-col :span="8" v-for="(r, index) in researchList" :key="index">
        <el-card shadow="hover">
          <!-- 项目名称，sname 为项目的属性 -->
          <div style="font-weight: bold; font-size: 12px; height: 40px">
            {{ r.sname }}
          </div>

          <div class="container">
            <div class="cardList2">受试者筛选共: {{ r.countTester }}人</div>
            <!-- 显示医院信息 -->
            <div class="cardList2">
              所属医院: {{ hospital[r.hospitalId - 1] }}
            </div>
          </div>
          <!-- 显示受试者筛选的 总人数 -->

          <!-- 使用 flexbox 布局，显示完成入组和提交的受试者人数 -->
          <div class="container">
            <div class="cardList2">完成入组受试者: {{ r.countGroup }} 人</div>
            <div class="cardList2">完成提交受试者: {{ r.countCrf }} 人</div>
          </div>

          <el-divider></el-divider>

          <!-- 两个按钮：一个用于跳转到 CRF 模板页面，另一个跳转到受试者管理页面 -->
          <center>
            <el-button type="primary" size="mini" plain @click="crfTrans()"
            >CRF模板
            </el-button
            >
            <el-button
              type="primary"
              size="mini"
              plain
              style="margin-left: 10%"
              @click="researchTrans(r.id)"
            >受试者管理
            </el-button
            >
          </center>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { listAll, selectBySname } from '@/api/system/research' // 导入用于获取项目列表和搜索项目的 API

export default {
  data() {
    return {
      inputSearch: '', // 存储输入框中的查询内容
      researchList: [], // 存储显示的研究项目列表
      researchArr: [], // 备用的项目数组，可能未使用
      hospital: [
        '云南省第一人民医院',
        '玉溪市人民医院',
        '普洱市人民医院',
        '镇雄县人民医院',
        '保山市人民医院',
        '个旧市人民医院',
        '西双版纳州人民医院'
      ]
    }
  },

  // Vue 生命周期钩子，在组件创建后自动执行
  created() {
    // 调用 API 获取所有研究项目，并将结果赋值给 researchList
    listAll(this.$store.state.user.hospId).then(res => {
      this.researchList = res  // 将所有项目的数据存储在 researchList 中
      console.log(this.researchList) // 打印加载的研究项目数据
    })
  },

  methods: {
    // 刷新按钮调用，重新获取并显示所有研究项目
    refresh() {
      this.inputSearch = '' // 先清空输入框内容
      listAll(this.$store.state.user.hospId).then(res => {
        this.researchList = res  // 将所有项目的数据存储在 researchList 中
        console.log(this.researchList) // 打印加载的研究项目数据
      })
    },

    // 跳转到受试者管理页面，传递当前项目的 id
    researchTrans(id) {
      this.$router.push('/subject?id=' + id) // 使用 Vue Router 跳转到指定页面
    },

    // 跳转到 CRF 模板页面
    crfTrans() {
      this.$router.push('/CRF') // 使用 Vue Router 跳转到 CRF 模板页面
    },

    // 查询按钮调用，根据 inputSearch 的内容搜索项目名称
    searchTitle() {
      if (this.inputSearch === '') {
        listAll(this.$store.state.user.hospId).then(res => {
          this.researchList = res  // 将所有项目的数据存储在 researchList 中
          console.log(this.researchList) // 打印加载的研究项目数据
        })
      } else {
        selectBySname(this.inputSearch).then((res) => {
          this.researchList = res // 将查询结果赋值给 researchList
          console.log(this.researchList) // 打印查询的研究项目数据
        })
      }
    }
  }
}
</script>
<style scoped>
/* 设置输入框的样式 */
.inRes {
  width: 30%; /* 宽度设置为 30% */
  margin-left: 10px; /* 左边距为 10px */
}

/* 卡片中的文字样式 */
.cardList {
  font-size: 12px; /* 设置字体大小 */
  margin-top: 12px; /* 设置顶部外边距 */
}

/* 使用 flex 布局的容器 */
.container {
  display: flex; /* 设置为 flex 布局 */
}

/* 卡片中每项内容的样式 */
.cardList2 {
  font-size: 12px; /* 设置字体大小 */
  margin-top: 12px; /* 设置顶部外边距 */
  flex: 1; /* 每个 flex 项目的比例为 1，确保均匀分布 */
}
</style>
